<template>
    <div>
        <div class="form-group">
            <input
                type="text"
                class="form-control"
                placeholder="评论人"
                v-model="author"
            >
        </div>
        <div class="form-group">
            <textarea
                class="form-control"
                placeholder="评论内容"
                cols="30"
                rows="10"
                v-model="content"
                style="resize:none"
            ></textarea>
        </div>
        <div class="form-group">
            <button @click="addHandle" class="btn btn-lg btn-primary">发布评论</button>
        </div>

    </div>
</template>
<script>
// 导入vuex
import {mapState,mapMutations,mapActions} from 'vuex';
export default {
    data() {
        return {
            author:'',
            content:''
        };
    },
    methods:{
        // 将this.addComment(comment)映射成this.$store.commit('comments/addComment',comment);
        ...mapMutations('comments',['addComment']),
        addHandle(){
            if(this.author.trim()==''){
                alert('请填写评论人');
                return false;
            }
            if(this.content.trim()==''){
                alert('请填写评论内容');
                return false;
            }
            const comment={
                id:Date.now().toString().substr(10),
                author:this.author,
                content:this.content,
                posttime:new Date().toLocaleDateString()
            }
            // 通过触发自定义事件, 给父组件传递值(评论对象)
            // this.$emit('addComment',comment)  
            // 直接调用vuex的mutations中的addComment()
            this.addComment(comment);    
            // 重置表单
            this.author=""
            this.content=""  
        }
    }
};
</script>
<style scoped lang="css">
</style>